<template>
  <!-- 定义一个容器用于显示网络拓扑图 -->
  <div id="network-topology" style="width: 100%; height: 90%;"></div>
  <button class="arrow left-arrow" @click="lastImage">&#9665;</button>
	<button class="arrow right-arrow" @click="nextImage">&#9655;</button>
  <!-- 弹窗组件 -->
  <el-dialog v-model="dialogVisible" width="50%" @close="handleClose">
    <component :is="currentComponent"></component>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';
import Neo4jGraph0603 from '@/components/neo4j/Neo4jGraph0603.vue';
import Neo4jGraph0802 from '@/components/neo4j/Neo4jGraph0802.vue';
import Neo4jGraph0903 from '@/components/neo4j/Neo4jGraph0903.vue';
import Neo4jGraph1102 from '@/components/neo4j/Neo4jGraph1102.vue';
import Neo4jGraph0701 from '@/components/neo4j/Neo4jGraph0701.vue';
import Neo4jGraph1001 from '@/components/neo4j/Neo4jGraph1001.vue';

export default {
  name: 'NetworkTopology',
  components: {
    Neo4jGraph0603,
    Neo4jGraph0802,
    Neo4jGraph0903,
    Neo4jGraph1102,
    Neo4jGraph0701,
    Neo4jGraph1001,
  },
  data() {
    return {
      myChart: null,
      dialogVisible: false,
      titleSum: 4,
      titleIndex: 0,
      option: {
        tooltip: {},
        series: [
          {
            type: 'graph',
            layout: 'none',
            data: [
              { name: '0603', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '0802', x: 300, y: 50, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '0903', x: 400, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '1102', x: 500, y: 50, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '0701', x: 200, y: 100, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '1001', x: 400, y: 100, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50 },
              { name: '星载基站', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 50, label: { position: 'left' } },
              { name: '卫星终端', x: 50, y: 250, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: 50 },
              { name: '接入及移动性管理功能', x: 150, y: 250, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 50 },
              { name: '会话管理功能', x: 250, y: 250, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 50 },
              { name: '用户面功能', x: 350, y: 250, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 50 },
              { name: '地面接入网', x: 450, y: 250, symbol: 'image://' + require('@/assets/icon/ass.png'), symbolSize: 60 },
              { name: '地面终端', x: 550, y: 250, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: 50 },
              { name: '矩形中心点', x: 300, y: 145, symbolSize: 0, label: { show: false } } // 添加矩形中心点作为结点
            ],
            links: [
              { source: '星载基站', target: '0603', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '星载基站', target: '0701', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '0603', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '0701', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '0802', target: '0903', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '0802', target: '1001', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '0903', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '1001', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '星载基站', target: '卫星终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '星载基站', target: '接入及移动性管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '接入及移动性管理功能', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '会话管理功能', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '用户面功能', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '地面接入网', target: '地面终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '矩形中心点', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '矩形中心点', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
              { source: '矩形中心点', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
            ], // 初始化为空
            label: {
              show: true,
              position: 'bottom',
              formatter: '{b}',
              color: 'white'
            },
            lineStyle: {
              curveness: 0,
              width: 2,
              color: 'white',
              opacity: 1
            }
          }
        ],
        graphic: [
          {
            type: 'rect',
            shape: {
              x: 170,
              y: 10,
              width: 440,
              height: 210
            },
            style: {
              fill: 'none',
              stroke: 'white',
              lineWidth: 2,
              lineDash: [5, 5]
            },
            z: 1
          },
          {
            type: 'text',
            left: 300,
            top: 200,
            style: {
              text: '星载用户面网元',
              fill: 'white',
              font: '14px Microsoft YaHei'
            },
            z: 2
          },
          {
            type: 'rect',
            shape: {
              x: 110,
              y: 280,
              width: 330,
              height: 110
            },
            style: {
              fill: 'none',
              stroke: 'white',
              lineWidth: 2,
              lineDash: [5, 5]
            },
            z: 1
          },
          {
            type: 'text',
            left: 230,
            top: 290,
            style: {
              text: '地面核心网',
              fill: 'white',
              font: '14px Microsoft YaHei'
            },
            z: 2
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
    // 添加点击事件
    this.myChart.on('click', this.handleNodeClick);
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(document.getElementById('network-topology'));
      this.myChart.setOption(this.option);
    },
    handleNodeClick(params) {
      const componentMap = {
        '0603': 'Neo4jGraph0603',
        '0802': 'Neo4jGraph0802',
        '0903': 'Neo4jGraph0903',
        '1102': 'Neo4jGraph1102',
        '0701': 'Neo4jGraph0701',
        '1001': 'Neo4jGraph1001',
      };
      const componentName = componentMap[params.name];
      if (componentName) {
        this.currentComponent = componentName;
        this.dialogVisible = true;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.currentComponent = null;
    },
    lastImage() {
      this.titleIndex = (this.titleIndex - 1 + this.titleSum) % this.titleSum;
      this.draw();
    },
    nextImage() {
      this.titleIndex = (this.titleIndex + 1 + this.titleSum) % this.titleSum;
      this.draw();
    }, 
    draw() {
      if (this.titleIndex == 0) {
        this.actionA();
      }
      else if (this.titleIndex == 1) {
        this.actionB();
      }
      else if (this.titleIndex == 2) {
        this.actionC();
      }
      else if (this.titleIndex == 3) {
        this.actionD();
      }
    },
    actionA() {
      this.updateChart([
        { source: '星载基站', target: '0603', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '0701', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0603', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0701', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0802', target: '0903', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0802', target: '1001', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0903', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '1001', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '卫星终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '接入及移动性管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '接入及移动性管理功能', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '会话管理功能', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '用户面功能', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '地面接入网', target: '地面终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
      ]);
    },
    actionB() {
      this.updateChart([
        { source: '接入及移动性管理功能', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '会话管理功能', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
      ]);
    },
    actionC() {
      this.updateChart([
        { source: '星载基站', target: '0603', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0603', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0802', target: '0903', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0903', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '卫星终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '接入及移动性管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '接入及移动性管理功能', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '会话管理功能', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '用户面功能', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '地面接入网', target: '地面终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
      ]);
    },
    actionD() {
      this.updateChart([
        { source: '星载基站', target: '0701', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0701', target: '0802', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0802', target: '0903', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '0903', target: '1102', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '卫星终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '星载基站', target: '接入及移动性管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '接入及移动性管理功能', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '会话管理功能', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '用户面功能', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '地面接入网', target: '地面终端', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '会话管理功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '用户面功能', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
        { source: '矩形中心点', target: '地面接入网', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
      ]);
    },
    updateChart(links) {
      this.option.series[0].links = links;
      this.myChart.setOption(this.option, { notMerge: true, replaceMerge: ['series'] });
    },
  }
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#network-topology {
    width: 100%;
    height: 100%;
  }
  .button-container {
    flex: 1;
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中对齐按钮 */
    align-items: center; /* 垂直居中对齐按钮 */
    }

  
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 40px;
    cursor: pointer;
    outline: none;
  }
  
  .left-arrow {
    left: 10px;
    color:cyan;
  }
  
  .right-arrow {
    right: 10px;
    color: cyan;
  }
</style>
